<template>
  <div class="customer-form">
    <base-form :fieldList="cusForm" :form="form" :rules="rules" ref="baseForm"></base-form>
  </div>
</template>

<script lang="ts">
/* 客户信息的form */
import { defineComponent, getCurrentInstance, reactive, toRefs, computed } from 'vue'
import baseForm from '@common/components/base-form/form.vue'
import { commonStore } from '@/common/store/modules/common'
import { handleType } from '@app/customer/mixins/index'
export default defineComponent({
  name: 'InfoForm',
  components: { baseForm },
  props: {
    form: {
      // 存储动态表单的值
      type: Object,
      default: () => ({})
    },
    type: {
      // 区分新建-add、编辑-edit
      type: String,
      default: 'add'
    }
  },
  setup(props) {
    const state = reactive({
      rules: {}
    })

    const instance: any = getCurrentInstance()

    const cusInfo = computed(() => {
      // 客户信息
      return commonStore().publicCache.cusInfo || []
    })

    const globalFieldsObj: any = computed(() => {
      // 全局字段对象
      return commonStore().publicCache.globalFieldCacheObj || {}
    })

    const cusForm: any = computed(() => {
      const form: any = []
      if (cusInfo.value && cusInfo.value.length) {
        cusInfo.value.forEach((item: any) => {
          const info = globalFieldsObj.value[item.field]
          if (item.glFieldId && info) {
            // 客户信息中添加的全局字段
            handleType(info, props.form, props.type)
            form.push(info)
          }
        })
      }
      return form
    })

    const isCheckForm = () => {
      // 表单校验
      return instance?.refs.baseForm.checkForm()
    }

    return {
      cusForm,
      isCheckForm,
      ...toRefs(state)
    }
  }
})
</script>

<style lang="stylus" scoped>
.customer-form
  position relative
  :deep(.el-form-item)
    width 100%
    margin-right 0 !important
    .el-select-v2, .el-cascader, .el-input-number, .el-input__wrapper
      width 100%
</style>
